<template>
  <div  class="app-container">

    <div class="filter-container" style="margin-bottom: 20px;margin-left: 15%">

      <el-dropdown
        @command="handleCommand"
        class="filter-item"
      >
      <span class="el-dropdown-link">
        {{dropdownText}}
        <i class="el-icon-arrow-down el-icon--right"/>
      </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="0">图书类别字典</el-dropdown-item>
          <el-dropdown-item disabled>其他字典</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-input
        v-model="dialogForm.name"
        clearable
        class="filter-item"
        style="width: 200px; margin-left: 20px;"
        placeholder="请输入字典名称"
      />

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 20px;"
        @click="getBookSortList(1)"
      >查找</el-button>

    </div>

<!--    图书分类字典管理-->
      <el-card class="box-card">
        <div slot="header">
          <div class="card_title">
            <span>图书类别字典</span>
            <el-tooltip
              class="item"
              effect="light"
              content="新增类别"
              placement="top-start">
              <el-button
                icon="el-icon-plus"
                class="title_create"
                circle
                @click="openDialog({})"
              >
              </el-button>
            </el-tooltip>
          </div>
        </div>
<!--        查询结果-->
        <el-table
          v-loading="bookSort.listLoading"
          :data="bookSort.bookSortList"
          size="small"
          element-loading-text="正在查询中。。。"
          fit
          highlight-current-row
          class="card_table"
        >
          <el-table-column align="center" width="50px" label="父id" prop="parentId"/>
          <el-table-column align="center" width="50px" label="id" prop="id"/>
          <el-table-column align="center" width="100px" label="名称" prop="name"/>
          <el-table-column
            align="center"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="deleteBookSort(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页角标-->
          <el-pagination
            v-show="bookSort.total>0"
            :total="bookSort.total"
            :page-size="bookSort.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-left: 0px"
          />

      </el-card>

      <el-card class="box-card" style="margin-left: 20px;">
        <div slot="header">
          <span class="title_center">其他字典</span>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>

<!--    编辑字典弹框-->
    <el-dialog
      title="修改图书基本信息"
      :visible.sync="showDialog"
      width="30%">
      <el-form ref="form" :model="dialogForm" label-width="80px">
        <el-form-item label="父类别">
          <el-input v-model="dialogForm.parentId"></el-input>
        </el-form-item>
        <el-form-item label="类别名称">
          <el-input v-model="dialogForm.name"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" v-show="!showCreateButton" @click="updateBookSort()">确定修改</el-button>
          <el-button type="primary" v-show="showCreateButton" @click="createBookSort()">确定新增</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>






</template>

<script>
    export default {
        name: "dictionary",
        data(){
            return{
                showDialog:false,
                showCreateButton:false,
                dropdownText:'选择字典',
                bookSort:{
                    total: 1,
                    pageNum: 1,
                    pageSize: 5,
                    orderBy: '',
                    sort: '',
                    listLoading:false,
                    bookSortList:[],
                },
                dialogForm:{
                    parentId: 0,
                    id: 0,
                    name: '',
                },
            }
        },

        watch:{

            //每当dialog关闭时，都要隐藏新增按钮，否则会出错
            "showDialog":function(){
                if(this.showDialog === false){
                    this.showCreateButton = false
                }
            },

        },

        created(){
          this.getList()
        },

        methods:{

            //获取下拉框选择的字典
            handleCommand(command) {
                if(command === 0){
                    this.dropdownText = '图书类别字典'
                }
            },

            //获取所有字典
            getList(){
                this.getBookSortList(1)
            },

            //获取图书类别字典
            getBookSortList(page,order,sortord){

                let self = this
                self.listLoading = true
                self.bookSort.pageNum = page
                self.orderBy = order
                self.sort = sortord
                let data = {
                    'parentId':self.dialogForm.parentId || null, //图书类别父级id  0-》无父级id
                    'name':self.dialogForm.name || null, //图书类别名称
                    'id':self.dialogForm.id || null, //图书类别id

                    'orderBy': self.bookSort.orderBy || null, //排序字段
                    'pageNum': self.bookSort.pageNum || 1, //当前页数
                    'pageSize': self.bookSort.pageSize || 5, //每页展示条数
                    'sort': self.bookSort.sort || null, //排序方式
                }
                self.$axios.post("/manage/dictionary/bookSortList",data).then(res =>{
                    try {
                        self.bookSort.bookSortList = res.data.data
                        self.bookSort.total = res.data.total
                        self.bookSort.listLoading = false
                    }catch(err){
                        self.bookSort.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.bookSort.listLoading = false
                })

            },

            //新增图书类别
            createBookSort(){
                let self = this
                self.listLoading = true
                let data = {
                    'parentId':self.dialogForm.parentId || null, //图书类别父级id  0-》无父级id
                    'name':self.dialogForm.name || null, //图书类别名称
                    'id':self.dialogForm.id || null, //图书类别id

                    'pageNum': 1,
                    'pageSize': 5,
                }
                self.$axios.post("/manage/dictionary/createDicBookSort",data).then(res =>{
                    try {
                        self.bookSort.bookSortList = res.data.data
                        self.bookSort.total = res.data.total
                        self.bookSort.listLoading = false
                        self.showDialog = false
                    }catch(err){
                        self.bookSort.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.bookSort.listLoading = false
                })
            },

            //更新图书类别
            updateBookSort(){
                let self = this
                self.listLoading = true
                let data = {
                    'parentId':self.dialogForm.parentId || null, //图书类别父级id  0-》无父级id
                    'name':self.dialogForm.name || null, //图书类别名称
                    'id':self.dialogForm.id || null, //图书类别id

                    'pageNum': 1,
                    'pageSize': 5,
                }
                self.$axios.post("/manage/dictionary/updateBookSort",data).then(res =>{
                    try {
                        self.bookSort.bookSortList = res.data.data
                        self.bookSort.total = res.data.total
                        self.bookSort.listLoading = false
                        self.showDialog = false
                    }catch(err){
                        self.bookSort.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.bookSort.listLoading = false
                })
            },

            //将记录图书原本的数据
            openDialog(row){
                if(row.id === undefined) {
                    this.showCreateButton = true
                }
                this.showDialog = true
                this.dialogForm = row
            },

            //删除图书类别
            deleteBookSort(row){
                this.$confirm('类别：' + row.name + ' 将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let self = this
                    self.listLoading = true
                    self.$axios.get("/manage/dictionary/deleteBookSort",{
                        params:{
                            id: row.id,
                        }
                    }).then(res =>{
                        try {
                            self.bookSort.bookSortList = res.data.data
                            self.bookSort.total = res.data.total
                            self.bookSort.listLoading = false
                        }catch(err){
                            self.bookSort.listLoading = false
                            self.$message.error(res.data.msg)
                        }
                    }).catch(err => {
                        self.$message.error("查询出错！！！！！")
                        self.bookSort.listLoading = false
                    })

                }).catch(() => {
                })
            },

            handleSizeChange(size){
                this.getBookSortList()
            },

            handleCurrentChange(current){
                this.getBookSortList(current)
            },

        }

    }
</script>

<style scoped>

  .box-card {
    width: 480px;
    padding: 20px;
    display: inline-block;
  }

  .card_table{
    margin-bottom: 20px;
    margin-left: 15px;
    width:350px
  }

  .card_title{
    text-align: right;
    display:block;
  }

  .title_create{
    margin-left: 130px;
    display: inline-block;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 20px;
  }


</style>
